<template>
  <!-- 体检基本信息页面 -->
  <div class="page">
    <!-- 搜索页面 -->
    <el-form
      ref="medicalInfoSearch"
      :model="medicalInfoSearch"
      size="small"
      :inline="true"
      class="query-form"
    >
      <el-form-item>
        <el-select v-model="medicalInfoSearch.officeId" placeholder="部门">
          <el-option
            v-for="item in optionsOffice"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          autocomplete="off"
          v-model="medicalInfoSearch.name"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="medicalInfoSearch.postname" placeholder="岗位">
          <el-option
            v-for="item in optionsJobs"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="medicalInfoSearch.type" placeholder="体检类型">
          <el-option label="入职体检" value="0"></el-option>
          <el-option label="常规体检" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          size="small"
          autocomplete="off"
          v-model="medicalInfoSearch.phone"
          placeholder="电话"
        ></el-input>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button size="small" type="primary" @click="searchMedical()"
          >查询</el-button
        >
        <el-button
          size="small"
          style="margin-left: 10px"
          @click="resetsearchUsers()"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 内容页面 -->
    <div class="bg-white top">
      <!-- 按钮 -->
      <div>
        <el-button
          size="small"
          icon="el-icon-circle-close"
          @click="cancelChoose()"
          >取消选择</el-button
        >
        <el-button
          size="small"
          icon="el-icon-delete"
          type="danger"
          @click="deleteCar()"
          :disabled="this.checkMedicalNum == ''"
          >删除</el-button
        >
      </div>
      <!-- 体检基本信息 -->
      <el-table
        :data="medicalInfoTable"
        @selection-change="selectiomedicalInfo"
        height="calc(100% - 80px)"
        size="small"
        ref="medicalInfo"
        :cell-style="cellStyle"
        style="border: 1px solid #d6cfe2"
        :header-cell-class-name="cellHeadStyle"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        class="table"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="user.name"
          label="姓名"
          align="center"
          width="150"
          fixed="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="user.office.name"
          label="部门"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="user.post.name"
          label="岗位"
          show-overflow-tooltip
          width="150"
        ></el-table-column>
        <el-table-column
          prop="medicaldate"
          label="体检日期"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="medicaltype"
          label="体检类型"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
                {{ $dictUtils.getDictLabel("medical_type", scope.row.medicaltype, '-') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="medicalarea"
          label="体检医院"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="level"
          label="医院等级"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
                {{ $dictUtils.getDictLabel("hospital_type", scope.row.level, '-') }}
          </template></el-table-column>
        <el-table-column
          prop="detailedaddress"
          label="详细地址"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="summary"
          label="汇总分析"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click.stop="lookSummary(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="medicalHandleSize"
        @current-change="medicalHandleCurrent"
        :current-page.sync="medicalInfoPageNo"
        :page-size="medicalInfoPageSize"
        layout="total, prev, pager, next, jumper"
        :total="medicalInfoTotal"
        style="margin: 1rem 0"
      >
      </el-pagination>
      <!-- 汇总分析详情 -->
      <el-dialog width="40%" :visible.sync="carImgDialog" title="汇总分析详情">
        <div v-html="summaryInfo"></div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import tableStyles from "../../../../utils/mixins.js";
import { colorSpan } from "../../sys/dashboard/echarts/default.js";
export default {
  mixins: [tableStyles],
  data() {
    return {
      // 公司ID
      companyId: "",
      //部门下拉选
      optionsOffice: [],
      //岗位下拉选
      optionsJobs: [],
      //顶部搜索
      medicalInfoSearch: {
        officeId: "",
        name: "",
        postname: "",
        type: "",
        phone: "",
      },
      //体检信息表格
      medicalInfoTable: [],
      loading: null,
      //批量删除
      checkMedicalNum: [],
      // 分页
      medicalInfoPageNo: 1,
      medicalInfoPageSize: 10,
      medicalInfoTotal: 0,

      // 查看汇总分析详情
      carImgDialog: false,
      summaryInfo: "",
    };
  },
  //接收ID参数
  created() {
    this.companyId = this.$route.query.id;
  },
  mounted() {
    this.getSelectUserMedical();
    this.getSelectMedicalOffice();
    this.getSelectMedicalJobs();
  },
  methods: {
    // 查询所有体检
    getSelectUserMedical() {
      this.loading = true;
      this.$http({
        url: "/sys/person/findMedical",
        method: "get",
        params: {
          pageNo: this.medicalInfoPageNo,
          pageSize: this.medicalInfoPageSize,
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.medicalInfoTable = data.medicalList;
          this.medicalInfoTotal = data.totalCount;
          this.loading = false;
        }
      });
    },
    // 查询部门下拉选
    getSelectMedicalOffice() {
      this.$http({
        url: "/sys/person/findOffice",
        method: "get",
        params: {
          companyId: this.companyId,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.optionsOffice = data.children;
        }
      });
    },
    // 查询岗位下拉选
    getSelectMedicalJobs() {
      this.$http({
        url: "/sys/person/findPostName",
        method: "get",
      }).then(({ data }) => {
        if (data && data.success) {
          this.optionsJobs = data.postList;
        }
      });
    },
    //搜索条件的体检
    searchMedical() {
      this.loading = true;
      this.$http({
        url: "/sys/person/searchMedical",
        method: "get",
        params: {
          pageNo: this.medicalInfoPageNo,
          pageSize: this.medicalInfoPageSize,
          companyId: this.companyId,
          ...this.medicalInfoSearch,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.medicalInfoTable = data.list;
          this.medicalInfoTotal = data.totalCount;
          this.loading = false;
        } else {
          this.medicalInfoTable = [];
          this.medicalInfoTotal = 0;
          this.loading = false;
        }
      });
    },
    //重置搜索
    resetsearchUsers() {
      (this.medicalInfoSearch = {
        officeId: "",
        name: "",
        postname: "",
        type: "",
        phone: "",
      }),
        this.getSelectUserMedical();
    },

    // 顶部取消按钮
    cancelChoose(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.medicalInfo.toggleRowSelection(row);
        });
      } else {
        this.$refs.medicalInfo.clearSelection();
      }
    },
    //点击选中的行的select
    selectiomedicalInfo(val) {
      this.checkMedicalNum = val;
    },
    // 顶部批量删除
    deleteCar() {
      let ids = this.checkMedicalNum
        .map((item) => {
          return item.id;
        })
        .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/sys/person/deleteMedical",
          method: "post",
          params: { medicalIds: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.getSelectUserMedical();
          }
        });
      });
    },

    //体检信息分页
    medicalHandleSize(val) {
      this.medicalInfoPageSize = val;
      this.medicalInfoPageNo = 1;
      this.getSelectUserMedical();
    },
    medicalHandleCurrent(val) {
      this.medicalInfoPageNo = val;
      this.getSelectUserMedical();
    },
    // 查看汇总分析
    lookSummary(colSummary) {
      this.carImgDialog = true;
      this.summaryInfo = colSummary.summary;
    },
  },
};
</script>